import styles from './Step.less'

const StepNode = (props: { step: string; type?: string }) => {
  const { step, type } = props

  return (
    <div className={styles.stepNodeWrapper}>
      {step === 'start' && (
        <svg viewBox="0 0 50 50" height="50" width="50" className={styles.stepStart}>
          <g>
            <circle cx="25" cy="25" r="21" />
          </g>
        </svg>
      )}
      {step === 'action' && (
        <svg viewBox="0 0 50 50" height="50" width="50" className={styles.stepAction}>
          <g>
            <rect x="4" y="4" ry="8" rx="8" height="42" width="42" />
          </g>
        </svg>
      )}
      {step === 'rule' && (
        <svg viewBox="0 0 50 50" height="50" width="50" className={styles.stepRule}>
          <g>
            <path
              transform="translate(25,25)"
              d="m-17,0l8.499999999999998,14.722431864335457l17,1.7763568394002505e-15l8.500000000000004,-14.72243186433545l-8.499999999999993,-14.722431864335464l-16.999999999999996,-8.881784197001252e-15l-8.50000000000001,14.722431864335444z"
            />
            <path
              transform="translate(25,25)"
              d="m-17,0l8.499999999999998,14.722431864335457l17,1.7763568394002505e-15l8.500000000000004,-14.72243186433545l-8.499999999999993,-14.722431864335464l-16.999999999999996,-8.881784197001252e-15l-8.50000000000001,14.722431864335444z"
            />
          </g>
        </svg>
      )}
      {step === 'end' && (
        <svg viewBox="0 0 50 50" height="50" width="50" className={styles.stepEnd}>
          <g>
            <circle cx="25" cy="25" r="21" />
          </g>
        </svg>
      )}
      {step === 'add' && (
        <svg viewBox="0 0 50 50" height="50" width="50" className={styles.stepAdd}>
          <g>
            <circle cx="25" cy="25" r="10" />
          </g>
        </svg>
      )}
      <span
        className={`iconfont icon-${type}`}
        style={{
          color: step === 'add' ? '#a7b8d1' : '#fff',
          fontSize: step === 'add' ? 12 : 16,
        }}
      />
    </div>
  )
}

export default StepNode
